<script setup>
import { ref, computed } from 'vue'
import { useCommonStore } from '@/stores'
const commonStore = useCommonStore()

const props = defineProps({
  title: {
    type: String,
    default: '标题'
  },
  // 是否显示底部按钮
  showBottom: {
    type: Boolean,
    default: false
  },
  // 确定按钮加载效果
  confirmLoading: {
    type: Boolean,
    default: false
  },
  // 延时触发close
  isDelayClose: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['close', 'submit'])

// 弹窗内容的内边距
const contentPadding = computed(() => {
  return props.showBottom ? '85' : '20'
})

// 开启/关闭
const isOpen = ref(false)
const open = () => {
  isOpen.value = true
}
let timer
const close = () => {
  isOpen.value = false
  // 是否需要延迟通知关闭
  if (props.isDelayClose) {
    timer = setTimeout(() => {
      emit('close')
      clearTimeout(timer)
    }, 300)
  } else {
    emit('close')
  }
}

// 点击提交/点击关闭
const onSubmit = () => {
  emit('submit')
}

defineExpose({ isOpen, open, close })
</script>

<template>
  <Transition name="move">
    <div class="zy-drawer" v-show="isOpen" :style="{ top: commonStore.isShowHead ? '52px' : '0' }">
      <div class="zy-drawer-container">
        <!-- 头部 -->
        <div class="top">
          <p class="title">{{ title }}</p>
          <svg-icon class="close" icon-name="guanbi" @click="close"></svg-icon>
        </div>
        <!-- 内容 -->
        <div
          class="content"
          :style="{
            paddingBottom: contentPadding + 'px',
            height: commonStore.isShowHead ? 'calc(100vh - 52px - 64px)' : 'calc(100vh - 64px)'
          }"
        >
          <slot></slot>
        </div>
        <!-- 底部 -->
        <div class="bottom" v-if="showBottom">
          <zy-button class="bottom-btn" :is-debounce="false" @click="close">放弃</zy-button>
          <zy-button class="bottom-btn submit" :loading="confirmLoading" @click="onSubmit"
            >确定</zy-button
          >
        </div>
      </div>
    </div>
  </Transition>
</template>

<style lang="scss" scoped>
.zy-drawer {
  width: 360px;
  height: 100%;
  position: fixed;
  right: 0;
  top: 52px;
  z-index: 1;
  transition: var(--tr);
  background-color: var(--drawer-bg);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(20px);
  .zy-drawer-container {
    position: relative;
    width: 100%;
  }
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  .title {
    font-size: 16px;
    color: var(--primary-text);
    font-weight: 600;
  }
  .close {
    font-size: 16px;
    padding: 3px;
    color: var(--gray-text-1);
    cursor: pointer;
  }
}
.content {
  height: calc(100vh - 52px - 64px);
  overflow-y: scroll;
  transition: var(--tr);
  &::-webkit-scrollbar {
    // 滚动条整体样式
    width: 4px;
    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    // 滚动条里面的小方块
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.2);
  }
  &::-webkit-scrollbar-track {
    // 滚动条里面的轨道
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0);
  }
}
.bottom {
  width: 100%;
  height: 80px;
  padding: 20px;
  display: flex;
  align-items: center;
  position: absolute;
  left: 0;
  bottom: 0;
  justify-content: space-between;
  background-color: var(--drawer-bottom-bg);
  backdrop-filter: blur(10px);
  transition: var(--tr);
  .bottom-btn {
    min-width: 100px;
    height: 48px;
    border-radius: 24px;
    border: 1px solid var(--primary-text);
    color: var(--primary-text);
  }
  .submit {
    margin-left: 20px;
    flex: 1;
    background-color: var(--primary-text);
    color: var(--drawer-btn-text);
  }
}

/* 进入起点&离开终点 */
.move-enter-from,
.move-leave-to {
  transform: translateX(360px);
}
.move-enter-active {
  transition: all 0.2s ease-out;
}
.move-leave-active {
  transition: all 0.2s ease-in;
}
/* 离开起点&进入终点 */
.move-enter-to,
.move-leave-from {
  transform: translateX(0px);
}
</style>
